import {
    reactive,
    computed
} from "vue"

// 过滤指令
const filters = {
    all(todos) {
        return todos;
    },
    // 返回已完成
    active(todos) {
        return todos.filter((item) => !item.complete);
    },
    // 返回未完成
    complate(todos) {
        return todos.filter((item) => item.complete);
    },
};

export function usefilterTodo(todos) {
    const filterState = reactive({
        filterList: [{
                value: "all",
                label: "全部",
            },
            {
                value: "active",
                label: "未完成",
            },
            {
                value: "complate",
                label: "已完成",
            },
        ],
        // 当前显示的类型
        visibility: "all",
        // 过滤后的结果
        filterTodos: computed(() => {
            return filters[filterState.visibility](todos);
        }),
    });
    return filterState
}